<template>
  <div class="avatar-wrapper">
    <img
      v-if="patient.imageUrl"
      :src="patient.imageUrl"
      class="user-avatar routeImg"
    />
    <img v-else :src="defaultAvatar" class="user-avatar routeImg" />
  </div>
</template>

<script>
export default {
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      defaultAvatar: '',
    }
  },
  watch: {
    'patient.imageUrl': {
      handler(val) {
        if (!val) this.defaultUrl()
      },
      deep: true,
    },
  },
  mounted() {
    setTimeout(() => {
      this.defaultUrl()
    }, 200)
  },
  methods: {
    defaultUrl() {
      if (this.patient.imageUrl == '') {
        //如果没有头像
        if (this.patient.sex == 0) {
          if (this.patient.age == 0) {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
          } else if (this.patient.age < 18) {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/son.jpg'
          } else if (this.patient.age > 50) {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/grandpa.jpg'
          } else {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
          }
        } else if (this.patient.sex == 1) {
          if (this.patient.age == 0) {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
          } else if (this.patient.age < 18) {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/son.jpg'
          } else if (this.patient.age > 50) {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/grandpa.jpg'
          } else {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
          }
        } else {
          if (this.patient.age == 0) {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/mom.jpg'
          } else if (this.patient.age < 18) {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/girl.jpg'
          } else if (this.patient.age > 50) {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/nanna.jpg'
          } else {
            this.defaultAvatar =
              'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/mom.jpg'
          }
        }
      }
    },
  },
}
</script>

<style>
.avatar-wrapper {
  position: relative;
}
.routeImg {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #ccc;
}
/* .routeImg:hover {
  transform: rotate(666turn);
  transition-duration: 59s;
  transition-timing-function: cubic-bezier(0.34, 0, 0.84, 1);
} */
.user-avatar {
  display: flex;
  flex-shrink: 0;
  margin-top: 6px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.el-icon-caret-bottom {
  position: absolute;
  right: -20px;
  top: 25px;
  font-size: 12px;
}
</style>
